<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../myCss/reset.css"/>
    <link rel="stylesheet" href="../../myCss/pullToRefresh.css"/>
    <style>
        .scroller li{
            border-bottom: 1px solid #dddddd;
        }
         .act{
            color: #38c89f;
        }
        .aui-card-list{
            margin-bottom: 0;
        }
        .sort{
            display: none;
            width: 90px;
            height: 137px;
            position: fixed;
            z-index: 99;
            background: #fff;
            left: 0;
            font-size: 14px;
            text-align: center;
            border-bottom:1px solid #ededed;
        }
        .sort div{
            padding: 6px 0;
            border-top:1px solid #ededed;
        }
        .serBar{
        height:45px;
        background:#27AA9E;
        width:100%;
        top: 0;
   		position: fixed;
    	z-index: 100;
    	display:none;
        }
        .seript{
        height:30px;
        padding:0 0 0 10px;
        width:80%;
        margin:8px 3px 0 8px;
        font-size:13px;
        border-radius: 5px;
        }
        .name{
        width:200px;
        font-size:13px !important;
         overflow:hidden; /*超出宽度部分的隐藏*/
        white-space:nowrap; /*文字不换行*/
        text-overflow:ellipsis;}
    </style>
</head>
<body style="overflow: hidden">
<header class="aui-bar aui-bar-nav" id="aui-header" >
    <a class="aui-btn aui-pull-left" tapmode onclick="location.href='../helpBuy/index.html'">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">我的订单</div>
     <div class="aui-btn aui-pull-right" id="serh"><span class="fa fa-search"></span></div>
    </header>
    
    <div class="serBar" id="serBar">
    <div><input class="seript" placeholder="输入购买商品名" id="search-input">
    <span class="fa fa-search" style="color:#fff;" id="ser" ></span>
    <span class="fa fa-window-close-o" style="margin-left:7px;color:#fff" id="close"></span>
    </div>
    </div>
    
   <!--  
    <div class="aui-searchbar" id="search"style="margin-top: 45px;">
    <div class="aui-searchbar-input aui-border-radius" tapmode >
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="输入购买商品" id="search-input">
        </form>
    </div>
    <div class="ser" id="ser">搜索</div>
</div> -->
<section class="aui-content"style="margin: 46px 0 5px 0" >
    <div class="aui-card-list" style="padding-left: 7px" >
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;width:90px;text-align: center" >
            <span id="sortBtn">全部订单</span>
            <span>▽</span>
        </div>
        <div class="sort">
         <div  class="act" onclick="sortC(this)" temp="3">全部订单</div>
        <div  onclick="sortC(this)" temp="0">未接单</div>
            <div  onclick="sortC(this)" temp="1">进行中</div>
            <div onclick="sortC(this)" temp="2">已完成</div>
        </div>
    </div>
</section>
<div id="wrapper" >
    <ul class="aui-list aui-media-list" id="orderUl">
    </ul>
</div>


<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-tab.js" ></script>
<script src="../../myJs/iscroll.js"></script>
<script src="../../myJs/pullToRefresh.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }

    $(function(){
        $.ajax({
         type: "post",
         url: '/randomdelivery/userManageController/userDemandOrder',
         data: {},
         datatype: "json",
         success: function (data) {
          alert(JSON.stringify(data));
         viewOrder(data);
         }

         });
   // viewOrder(data);
    })
    /*  var data = {
        "code": 200,
        "msg": [
            {
                "demandId": 1,
                "tradeName": "餐巾纸",
                "demandCreatetime": "2017-2-5 11：12",
                "demandState": "已完成"
            },
            {
                "demandId": 2,
                "tradeName": "娃哈哈",
                "demandCreatetime": "2017-2-4 13：12",
                "demandState": "进行中"
            },
            {
                "demandId": 3,
                "tradeName": "奶茶",
                "demandCreatetime": "2017-3-2 11：31",
                "demandState": "已完成"
            }
        ]
    } */
    function viewOrder(data){
    var orderState;
    $("#orderUl").html("");
        $.each(data.msg,function(num,data){
        var demandState = data.demandState;
        if(demandState==0){
        orderState="未接单";
        }else if(demandState==1){
        
         if(data.orderState==0){
         orderState="等待代购者确认金额";
         }  else if(data.orderState==1){
         orderState="待支付";
         }
         else if(data.orderState==2){
         orderState="已支付";
         }
         else if(data.orderState==3){
         orderState="寄件中";
         }
         else if(data.orderState==4){
         orderState="待取件";
         } else if(data.orderState==5){
         orderState="派件中";
         }
         else if(data.orderState==6){
         orderState="已完成";
         } else if(data.orderState==7){
         orderState="已关闭";
         }
         else if(data.orderState==8){
         orderState="退款中";
         }
        }else{
        	 orderState="已完成";
        }
        if(demandState==0){
            $("#orderUl").append('<li ><div class="aui-media-list-item-inner" demandId="'+data.demandId+'" onclick="demandInfo(this)">\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-15 name"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i> '+data.tradeName+'</div>\
                            <div class="aui-list-item-right" style="color:rgb(255, 128, 18)"><span class="fa fa-exclamation-circle"></span>'+orderState+'</div>\
                            </div>\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-14"></div>\
                            <div class="aui-list-item-right">'+data.demandCreatetime+'</div>\
                    </div>\
                    </div>\
                    </div></li>');
                    }else if(demandState==2||data.orderState==6){
            $("#orderUl").append('<li ><div class="aui-media-list-item-inner" demandId="'+data.demandId+'" onclick="demandInfo(this)">\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-15 name"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i> '+data.tradeName+'</div>\
                            <div class="aui-list-item-right" ><span class="fa fa-gift"></span>'+orderState+'</div>\
                            </div>\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-14"></div>\
                            <div class="aui-list-item-right">'+data.demandCreatetime+'</div>\
                    </div>\
                    </div>\
                    </div></li>');
                    }else if(data.orderState==7){
            $("#orderUl").append('<li ><div class="aui-media-list-item-inner" demandId="'+data.demandId+'" onclick="demandInfo(this)">\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-15 name"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i> '+data.tradeName+'</div>\
                            <div class="aui-list-item-right"style="color:rgba(255, 39, 18, 0.82)"><span class="fa fa-times-circle-o"></span>'+orderState+'</div>\
                            </div>\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-14"></div>\
                            <div class="aui-list-item-right">'+data.demandCreatetime+'</div>\
                    </div>\
                    </div>\
                    </div></li>');
                    }else if(data.orderState==8){
            $("#orderUl").append('<li ><div class="aui-media-list-item-inner" demandId="'+data.demandId+'" onclick="demandInfo(this)">\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-15 name"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i> '+data.tradeName+'</div>\
                            <div class="aui-list-item-right" style="color:rgba(232, 201, 48,1)"><span class="fa fa-money"></span>'+orderState+'</div>\
                            </div>\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-14"></div>\
                            <div class="aui-list-item-right">'+data.demandCreatetime+'</div>\
                    </div>\
                    </div>\
                    </div></li>');
                    }else{
                           $("#orderUl").append('<li ><div class="aui-media-list-item-inner" demandId="'+data.demandId+'" onclick="demandInfo(this)">\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-15 name"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i> '+data.tradeName+'</div>\
                            <div class="aui-list-item-right" style="color:#27AA9E"><span class="fa fa-street-view"></span>'+orderState+'</div>\
                            </div>\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-14"></div>\
                            <div class="aui-list-item-right">'+data.demandCreatetime+'</div>\
                    </div>\
                    </div>\
                    </div></li>');
                    }
        })
        

    }
    $("#sortBtn").on("click",function(){
        $(".sort").fadeIn("slow");
    })
    function sortC(node){

    var temp=node.getAttribute("temp");    
  $.ajax({
         type: "post",
         url: '/randomdelivery/userManageController/userChooseDemandOrder',
         data: {temp:temp},
         datatype: "json",
         success: function (data) {
         alert(JSON.stringify(data));
          $(".sort div").removeClass("act");
        var method = node.innerHTML;
        node.className='act';
        $(".sort").fadeOut("slow");
        $("#sortBtn").html(method);
        viewOrder(data);
         }

         });
       
        
        
        //alert(sortBtn);
    }
   
    function demandInfo(node){
        var demandId = node.getAttribute("demandId");
        sessionStorage.setItem("demandId", demandId);
        alert(demandId);
        location.href='../helpMe/orderDetails.html';
    }
    
           /* 搜索 */
    $("#ser").on("click",function(){
    	var str = $("#search-input").val();
        $.ajax({
            type: "post",
            url: '/randomdelivery/userManageController/userDemandOrderSelectBy',
            data: {
            	temp:str
            },
            datatype: "json",
            success: function (data) {
                alert(JSON.stringify(data));
                viewOrder(data);
               $("#search-input").val("");
               $("#aui-header").show();
           	$("#serBar").hide();
            }

        });
    	
    })
        $("#close").on("click",function(){
        	$("#aui-header").show();
        	$("#serBar").hide();
    })
     $("#serh").on("click",function(){
        	$("#aui-header").hide();
        	$("#serBar").show();
    })
</script>
<script>
    refresher.init({
        id:"wrapper"
       /*  pullDownAction:Refresh,
        pullUpAction:Load */
    });
    function Refresh() {
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            //这里写你的刷新代码
            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";
            setTimeout(function () {
                wrapper.refresh();
                var el, li, i;
                el =document.querySelector("#wrapper ul");
                $.each(data.msg,function(num,data){
                    li = document.createElement('li');
                    li.innerHTML = '  <div class="aui-media-list-item-inner">\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-15">'+data.tradeName+'</div>\
                            <div class="aui-list-item-right">'+data.demandState+'</div>\
                            </div>\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-14"></div>\
                            <div class="aui-list-item-right">'+data.demandCreatetime+'</div>\
                    </div>\
                    </div>\
                    </div>';
                    el.insertBefore(li, el.childNodes[0]);
                })
            },1000);//模拟qq下拉刷新显示成功效果
            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
        }, 1000);
    }
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            $.each(data.msg,function(num,data){
                li = document.createElement('li');
                li.innerHTML='<div class="aui-media-list-item-inner">\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-15">'+data.tradeName+'</div>\
                            <div class="aui-list-item-right">'+data.demandState+'</div>\
                            </div>\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title aui-font-size-14"></div>\
                            <div class="aui-list-item-right">'+data.demandCreatetime+'</div>\
                    </div>\
                    </div>\
                    </div>\
                    </div>';
                el.appendChild(li, el.childNodes[0]);
            })
            wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
        },1000);
    }
</script>
</body>
</html>